<template>
	<view class="recruitment">
		<view class="header">
			<view class="class_search">
				<u-search placeholder="请输入关键字" v-model="val" animation="false" @search="searchname"
					@clear="clearname">
				</u-search>
			</view>
			<view class="screen_tab">
				<view class="tab2">
					<view @click="typeshow=true">
						<view>{{alltype}}</view>
						<image src="../../../static/image/job/triangle.png"></image>
						<u-picker mode="selector" v-model="typeshow"  :default-selector="[0]" :range="jobList" range-key="label" @confirm="confirm_type"></u-picker>
					</view>
					<view @click="areashow=true">
						<view>{{address}}</view>
						<image src="../../../static/image/job/triangle.png"></image>
						<u-select v-model="areashow" mode="mutil-column-auto" :list="cityList"
							@confirm="confirm_area"></u-select>
					</view>
					<view @click="stateshow=true">
						{{state}}
						<image src="../../../static/image/job/triangle.png"></image>
						<u-picker mode="selector" v-model="stateshow"  :default-selector="[0]" :range="statelist" @confirm="confirm_state"></u-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="add" @click="gotoadd">
			<image src="../../static/assets/image/add.png"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in datalist" :key="index" @click="gotodetail(item.id)">
				<view class="title">
					<text style="max-width: 500rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.work_type_name}}({{item.number}}人)</text>
					<!-- <text class="upshelf" v-if="item.in_from_sale">已上架</text> -->
					<text class="upshelf downshelf" v-if="!item.in_from_sale">已下架</text>
				</view>
				<view class="demand">
					<text v-for="(citem,cindex) in item.label_tag_ids" :key="cindex">{{citem.name}}</text>
				</view>
				<view class="rec_type">
					<view class="name">
						<image src="../../../static/image/job/date1.png"></image>
						<text class="company">发布时间：{{item.data}}</text>
					</view>
					<view style="color: #999999;" v-if="item.city_name==item.state_name">
						{{item.city_name}}
					</view>
					<view style="color: #999999;" v-else>
						{{item.state_name}}{{item.city_name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'

	export default {
		data() {
			return {
				val:'',
				typeshow:false,
				alltype:'全部工种',
				areashow:false,
				address:'全部',
				stateshow:false,
				area_show:false,
				mode: 'date',
				state:'全部',
				statelist:['全部','已上架','已下架'],
				state_val:'-1',
				cityList:[],
				jobList:[],
				alltypeid: '-1',
				city_id:'-1',
				datalist:[],
				userInfo:{},
				date:''
			}
		},
		onLoad(){
			this.jobList = []
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			}
			this.cityListMethod()
			this.tageMethod()
			uni.setStorageSync('myRecruitmentstate', '-1')
			this.state = '全部'
			// if(uni.getStorageSync('RecruitmentInformationid')==''){
			// 	// this.getloc();
			// }else{
			// 	this.city_id = 78
			// 	this.address = '苏州市'
			// 	this.state_val = uni.getStorageSync('myRecruitmentstate')
			// 	this.getdata()
			// }
				// this.getdata()
		},
		onShow(){
			if(uni.getStorageSync('myRecruitmentstate') != ''){
				this.state_val = uni.getStorageSync('myRecruitmentstate')
				if(this.state_val == '-1'){
					this.state = '全部'
				}else if(this.state_val == 1){
					this.state = '已上架'
				}else{
					this.state = '已下架'
				}
				this.getdata()
			}
		},
		methods: {
			getdata(){
				api.myRecruitments('jhj.recruitment.release','_api_my_recruit',this.userInfo.access_token,this.userInfo.uid,
				this.state_val,this.alltype,this.city_id,this.val).then(res=>{
					res.data.forEach(item=>{
						item.data = item.data.split(' ')[0]
					})
					this.datalist = res.data
				})
			},
			gotoadd() {
				uni.navigateTo({
					url: '/pagesB/mine/recruitment/releaseRecruitment'
				})
			},
			searchname(val){
				this.alltype = '全部工种'
				this.alltypeid = '-1'
				this.val = val
				this.getdata()
			},
			clearname(){
				this.val = ''
				this.getdata()
			},
			gotodetail(id){
				uni.navigateTo({
					url: `/pages/home/Recruitment/components/recruitmentDetail?isshow=1&&id=${id}`
				})
			},
			confirm_type(e){
				this.val = ''
				this.alltype = this.jobList[e[0]].label
				this.alltypeid = this.jobList[e[0]].value
				// if(this.alltype=='全部工种'){
				// 	this.alltype = '-1'
				// }else{
				// 	this.alltype = this.jobList[e[0]].value
				// }
				this.getdata()
			},
			confirm_area(e){
				console.log(e);
				if (e[0].label == e[1].label) {
					this.address = e[0].label
				} else {
					this.address = e[1].label
				}
				this.city_id = e[1].value
				this.getdata()
			},
			confirm_state(e){
				console.log(e);
				this.state = this.statelist[e[0]]
				console.log(this.state);
				if(e==0){
					this.state_val = '-1'
				}else if(e==1){
					this.state_val = 1
				}else{
					this.state_val = 0
				}
				uni.setStorageSync('myRecruitmentstate', this.state_val)
				this.getdata()
			},
			cityListMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area', this.userInfo.access_token).then(
					res => {
						this.cityList = res.data
						this.cityList.unshift({label:'全国',value:-1,children:[{label:'全部',value:-1}]})
					}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			},
			tageMethod() {
				api.cityApi('res.country.state', '_api_get_information_in_bulk_area_reverse', this.userInfo.access_token)
					.then(
						res => {
							let objData = res.data.tag
							for (let key in objData) {
								let obj = {}
								obj.value = objData[key]
								obj.label = key
								this.jobList.push(obj)
							}
							this.jobList.unshift({
								value: -1,
								label: '全部工种'
							})
						}).catch(e => {
						uni.showToast({
							icon: 'none',
							title: e.message
						})
					})
			},
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			},
		
		}
	}
</script>

<style lang="less" scoped>
	.recruitment{
		height: 100%;
		background-color: #F4F6F8;
		overflow: hidden;
		
		.header {
			width: 100%;
			height: 160rpx;
			background-color: #FFFFFF;
			padding: 24rpx 30rpx 0;
			// position: fixed;
			display: flex;
			flex-direction: column;
		
			.class_search {
				background-color: #F4F6F8;
				width: 100%;
				height: 60rpx;
				border-radius:38rpx;
				display: flex;
				text-align: left;
				align-items: center;
				
				&>input {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
		
				.placeholder_input {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}
			}
			.screen_tab{
				flex: 1;
				display: flex;
				align-items: center;
				.tab2{
					flex: 1;
					display: flex;
					>view {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 44rpx;
						background: #F4F6F8;
						border-radius: 4rpx;
						font-size: 28rpx;
						color: #666666;
						margin-right: 12rpx;
						position: relative;
						>image {
							width: 10rpx;
							height: 10rpx;
							position: absolute;
							right: 10rpx;
							bottom: 4rpx;
						}
					}
					
					>view:nth-child(1) {
						// width: 168rpx;
						padding: 2rpx 40rpx 2rpx 16rpx;
					
						>view {
							width: 200rpx;
							text-align: center;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					>view:nth-child(2) {
						// width: 116rpx;
						padding: 2rpx 40rpx 2rpx 20rpx;
					
						>view {
							max-width: 112rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					
					>view:nth-child(3) {
						width: 118rpx;
					}
					.all_screen{
						padding: 31rpx 40rpx 0;
						.screen_title{
							text-align: center;
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}
						.screen_subtitle{
							font-size: 34rpx;
							font-weight: bold;
							color: #333333;
							margin-top: 52rpx;
						}
						.all_labels{
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							.labels{
								width: 206rpx;
								height: 74rpx;
								text-align: center;
								line-height: 74rpx;
								background: #F4F6F8;
								border-radius: 4rpx;
								margin-top: 24rpx;
							}
							.active_labels{
								border: 2rpx solid #E92231;
							}
							.active_content_label{
								border: 2rpx solid #E92231;
							}
						}
						.address{
							margin-top: 21rpx;
							margin-bottom: 288rpx;
							/deep/.u-input{
								width: 100%!important;
							}
							/deep/input{
								flex: 1;
								width: 100%!important;
							}
						}
					}
				}
			}
		}
		.add{
			position: fixed;
			bottom: 100rpx;
			right: 42rpx;
			image{
				width: 116rpx;
				height: 116rpx;
			}
		}
		.list{
			.item{
				display: flex;
				flex-direction: column;
				height: 248rpx;
				background: #fff;
				padding: 38rpx 40rpx 30rpx;
				margin-top: 10rpx;
				.title{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text:first-child{
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
					}
				}
				.upshelf{
					font-size: 26rpx;
					color: #5784F1;
					padding: 2rpx 16rpx;
					border: 1px solid #5784F1;
					margin-left: 10rpx;
					border-radius: 24rpx;
				}
				.downshelf{
					color: #E92635;
					border: 1px solid #E92635;
				}
				.demand{
					margin-top: 20rpx;
					text{
						font-size: 26rpx;
						color: #666666;
						padding: 6rpx 14rpx;
						background: #F4F6F8;
						margin-right: 12rpx;
					}
				}
				.rec_type{
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					.name{
						display: flex;
						align-items: center;
						image{
							width: 26rpx;
							height: 26rpx;
						}
						.company{
							margin-left: 9rpx;
							font-size: 26rpx;
							color: #999999;
						}
					}
					.area{
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 24rpx;
						text{
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
	
	u-search{
		width: 100%;
	}
	
	/deep/.u-action {
		display: none;
	}
	/deep/.u-input__right-icon{
		display: none;
	}
	/deep/.u-input{
		width: 314rpx!important;
	}
	/deep/input{
		width: 314rpx!important;
		background: #F4F6F8;
		border-radius: 38rpx;
		flex: none;
		text-align: center;
	}
	/deep/.uni-picker-view-wrapper:nth-child(2) .uni-picker-view-column{
		display: none!important;
	}
	/deep/.u-select__body__picker-view picker-view-column:nth-child(3) {
		display: none!important;
	}
</style>
